<template>
	<view class="hot-pannel">
		<view class="hot-item" v-for="item in dataList" :key="item.id">
			<view class="text">
				<text class="text-title">{{item.title}}</text>
				<text class="text-desc">{{item.alt}}</text>
			</view>
			<navigator :url="`/pages/hot/hot?type=${item.type}`" class="card">
				<image :src="item.pictures[0]" mode=""></image>
				<image :src="item.pictures[1]" mode=""></image>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			dataList:{
				default: () => {
					return []
				}
			}
		}
	}
</script>

<style lang="scss">
	.hot-pannel{
		display: flex;
		flex-wrap: wrap;
		min-height: 508rpx;
		background-color: #fff;
		.hot-item{
			width: 50%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			justify-content: center;
			padding: 0 20rpx;
			.text{
				display: flex;
				align-items: center;
				justify-content: start;
				.text-title{
					font-size: 32rpx;
					color: #262626;
				}
				.text-desc{
					font-size: 24rpx;
					color: #7f7f7f;
					margin-left: 20rpx;
				}
			}
			.card{
				display: flex;
				justify-content: space-around;
				padding: 15rpx 0;
				image{
					width: 150rpx;
					height: 150rpx;
				}
			}
			&:nth-child(2n+1) {
			      border-right: 1rpx solid #eee;
			    }
		}
	}
</style>